ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്ക് ആർക്കിടെക്ചർ: കമ്പോണന്റ് ട്രീ ഒപ്റ്റിമൈസേഷനിൽ വൈദഗ്ദ്ധ്യം നേടാം

ആധുനിക വെബ് ഡെവലപ്‌മെൻ്റിൻ്റെ ലോകത്ത്, ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകൾക്കാണ് പ്രാധാന്യം. റിയാക്റ്റ്, ആംഗുലർ, Vue.js പോലുള്ള ഫ്രെയിംവർക്കുകൾ സങ്കീർണ്ണവും ഇൻ്ററാക്ടീവുമായ യൂസർ ഇൻ്റർഫേസുകൾ നിർമ്മിക്കുന്നതിന് ശക്തമായ ടൂളുകൾ നൽകുന്നു. ഈ ഫ്രെയിംവർക്കുകളുടെയെല്ലാം ഹൃദയഭാഗത്ത് കമ്പോണന്റ് ട്രീ എന്ന ആശയമാണുള്ളത് - അതായത് UI-യെ പ്രതിനിധീകരിക്കുന്ന ഒരു ശ്രേണീഘടന. എന്നിരുന്നാലും, ആപ്ലിക്കേഷനുകൾ സങ്കീർണ്ണമാകുമ്പോൾ, ശരിയായി കൈകാര്യം ചെയ്തില്ലെങ്കിൽ കമ്പോണന്റ് ട്രീ ഒരു വലിയ പെർഫോമൻസ് തടസ്സമായി മാറിയേക്കാം. ഈ ലേഖനം ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളിലെ കമ്പോണന്റ് ട്രീ ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരു സമഗ്രമായ ഗൈഡ് നൽകുന്നു, അതിൽ പെർഫോമൻസ് തടസ്സങ്ങൾ, റെൻഡറിംഗ് രീതികൾ, മികച്ച കീഴ്‌വഴക്കങ്ങൾ എന്നിവ ഉൾപ്പെടുന്നു.

കമ്പോണന്റ് ട്രീ മനസ്സിലാക്കാം

കമ്പോണന്റ് ട്രീ എന്നത് UI-യുടെ ഒരു ശ്രേണീപരമായ പ്രതിനിധാനമാണ്, ഇവിടെ ഓരോ നോഡും ഒരു കമ്പോണന്റിനെ പ്രതിനിധീകരിക്കുന്നു. കമ്പോണന്റുകൾ എന്നത് ലോജിക്കും പ്രസൻ്റേഷനും ഉൾക്കൊള്ളുന്ന, പുനരുപയോഗിക്കാവുന്ന ബിൽഡിംഗ് ബ്ലോക്കുകളാണ്. കമ്പോണന്റ് ട്രീയുടെ ഘടന ആപ്ലിക്കേഷൻ്റെ പ്രകടനത്തെ നേരിട്ട് ബാധിക്കുന്നു, പ്രത്യേകിച്ച് റെൻഡറിംഗിലും അപ്ഡേറ്റുകളിലും.

റെൻഡറിംഗും വെർച്വൽ DOM-ഉം

മിക്ക ആധുനിക ജാവാസ്ക്രിപ്റ്റ് ഫ്രെയിംവർക്കുകളും ഒരു വെർച്വൽ DOM ഉപയോഗിക്കുന്നു. വെർച്വൽ DOM എന്നത് യഥാർത്ഥ DOM-ൻ്റെ ഒരു ഇൻ-മെമ്മറി പ്രതിനിധാനമാണ്. ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് മാറുമ്പോൾ, ഫ്രെയിംവർക്ക് വെർച്വൽ DOM-നെ മുൻ പതിപ്പുമായി താരതമ്യം ചെയ്യുകയും, വ്യത്യാസങ്ങൾ കണ്ടെത്തുകയും (ഡിഫിംഗ്), ആവശ്യമായ അപ്ഡേറ്റുകൾ മാത്രം യഥാർത്ഥ DOM-ൽ പ്രയോഗിക്കുകയും ചെയ്യുന്നു. ഈ പ്രക്രിയയെ റീകൺസിലിയേഷൻ എന്ന് വിളിക്കുന്നു.

എന്നിരുന്നാലും, റീകൺസിലിയേഷൻ പ്രക്രിയയ്ക്ക് തന്നെ കമ്പ്യൂട്ടേഷണൽ ചിലവ് കൂടുതലായിരിക്കും, പ്രത്യേകിച്ച് വലുതും സങ്കീർണ്ണവുമായ കമ്പോണന്റ് ട്രീകൾക്ക്. റീകൺസിലിയേഷൻ ചെലവ് കുറയ്ക്കുന്നതിനും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിനും കമ്പോണന്റ് ട്രീ ഒപ്റ്റിമൈസ് ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.

പെർഫോമൻസ് തടസ്സങ്ങൾ തിരിച്ചറിയൽ

ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നിങ്ങളുടെ കമ്പോണന്റ് ട്രീയിലെ പെർഫോമൻസ് തടസ്സങ്ങൾ തിരിച്ചറിയേണ്ടത് അത്യാവശ്യമാണ്. പെർഫോമൻസ് പ്രശ്നങ്ങളുടെ സാധാരണ കാരണങ്ങൾ താഴെ പറയുന്നവയാണ്:

• അനാവശ്യമായ റീ-റെൻഡറുകൾ: പ്രോപ്പുകളോ സ്റ്റേറ്റോ മാറിയിട്ടില്ലെങ്കിലും കമ്പോണന്റുകൾ വീണ്ടും റെൻഡർ ചെയ്യുന്നത്.
• വലിയ കമ്പോണന്റ് ട്രീകൾ: ആഴത്തിൽ നെസ്റ്റ് ചെയ്ത കമ്പോണന്റ് ശ്രേണികൾ റെൻഡറിംഗ് വേഗത കുറയ്ക്കും.
• ചെലവേറിയ കണക്കുകൂട്ടലുകൾ: റെൻഡറിംഗ് സമയത്ത് കമ്പോണന്റുകൾക്കുള്ളിലെ സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകൾ അല്ലെങ്കിൽ ഡാറ്റാ പരിവർത്തനങ്ങൾ.
• കാര്യക്ഷമമല്ലാത്ത ഡാറ്റാ ഘടനകൾ: പതിവായ ലുക്ക്അപ്പുകൾക്കോ അപ്ഡേറ്റുകൾക്കോ ഒപ്റ്റിമൈസ് ചെയ്യാത്ത ഡാറ്റാ ഘടനകൾ ഉപയോഗിക്കുന്നത്.
• DOM മാനിപ്പുലേഷൻ: ഫ്രെയിംവർക്കിൻ്റെ അപ്ഡേറ്റ് മെക്കാനിസത്തെ ആശ്രയിക്കുന്നതിന് പകരം DOM-നെ നേരിട്ട് കൈകാര്യം ചെയ്യുന്നത്.

ഈ തടസ്സങ്ങൾ തിരിച്ചറിയാൻ പ്രൊഫൈലിംഗ് ടൂളുകൾക്ക് സഹായിക്കാനാകും. റിയാക്റ്റ് പ്രൊഫൈലർ, ആംഗുലർ ഡെവ്‌ടൂൾസ്, Vue.js ഡെവ്‌ടൂൾസ് എന്നിവ ജനപ്രിയ ഓപ്ഷനുകളിൽ ഉൾപ്പെടുന്നു. ഈ ടൂളുകൾ ഓരോ കമ്പോണന്റും റെൻഡർ ചെയ്യാൻ എടുക്കുന്ന സമയം അളക്കാനും അനാവശ്യമായ റീ-റെൻഡറുകൾ തിരിച്ചറിയാനും ചെലവേറിയ കണക്കുകൂട്ടലുകൾ കണ്ടെത്താനും നിങ്ങളെ അനുവദിക്കുന്നു.

പ്രൊഫൈലിംഗ് ഉദാഹരണം (റിയാക്റ്റ്)

നിങ്ങളുടെ റിയാക്റ്റ് ആപ്ലിക്കേഷനുകളുടെ പ്രകടനം വിശകലനം ചെയ്യുന്നതിനുള്ള ശക്തമായ ഒരു ടൂളാണ് റിയാക്റ്റ് പ്രൊഫൈലർ. റിയാക്റ്റ് ഡെവ്‌ടൂൾസ് ബ്രൗസർ എക്സ്റ്റൻഷനിൽ നിങ്ങൾക്ക് ഇത് ആക്സസ് ചെയ്യാൻ കഴിയും. നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായുള്ള ഇടപെടലുകൾ റെക്കോർഡ് ചെയ്യാനും ആ ഇടപെടലുകൾക്കിടയിൽ ഓരോ കമ്പോണൻ്റിൻ്റെയും പ്രകടനം വിശകലനം ചെയ്യാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

റിയാക്റ്റ് പ്രൊഫൈലർ ഉപയോഗിക്കുന്നതിന്:

1. നിങ്ങളുടെ ബ്രൗസറിൽ റിയാക്റ്റ് ഡെവ്‌ടൂൾസ് തുറക്കുക.
2. "Profiler" ടാബ് തിരഞ്ഞെടുക്കുക.
3. "Record" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
4. നിങ്ങളുടെ ആപ്ലിക്കേഷനുമായി സംവദിക്കുക.
5. "Stop" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക.
6. ഫലങ്ങൾ വിശകലനം ചെയ്യുക.

പ്രൊഫൈലർ നിങ്ങൾക്ക് ഒരു ഫ്ലേം ഗ്രാഫ് കാണിച്ചുതരും, ഇത് ഓരോ കമ്പോണന്റും റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തെ പ്രതിനിധീകരിക്കുന്നു. റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുക്കുന്ന കമ്പോണന്റുകൾ പെർഫോമൻസ് തടസ്സങ്ങളാകാം. റെൻഡർ ചെയ്യാൻ എടുത്ത സമയത്തിനനുസരിച്ച് തരംതിരിച്ച കമ്പോണന്റുകളുടെ ഒരു ലിസ്റ്റ് കാണുന്നതിന് നിങ്ങൾക്ക് റാങ്ക്ഡ് ചാർട്ടും ഉപയോഗിക്കാം.

ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

നിങ്ങൾ തടസ്സങ്ങൾ തിരിച്ചറിഞ്ഞുകഴിഞ്ഞാൽ, നിങ്ങളുടെ കമ്പോണന്റ് ട്രീയുടെ പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന് വിവിധ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ പ്രയോഗിക്കാൻ കഴിയും.

1. മെമ്മോയിസേഷൻ

മെമ്മോയിസേഷൻ എന്നത് ചെലവേറിയ ഫംഗ്‌ഷൻ കോളുകളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുകയും അതേ ഇൻപുട്ടുകൾ വീണ്ടും സംഭവിക്കുമ്പോൾ കാഷെ ചെയ്ത ഫലം തിരികെ നൽകുകയും ചെയ്യുന്ന ഒരു ടെക്നിക്കാണ്. കമ്പോണന്റ് ട്രീകളുടെ പശ്ചാത്തലത്തിൽ, പ്രോപ്പുകൾ മാറിയിട്ടില്ലെങ്കിൽ കമ്പോണന്റുകൾ വീണ്ടും റെൻഡർ ചെയ്യുന്നതിൽ നിന്ന് മെമ്മോയിസേഷൻ തടയുന്നു.

React.memo

റിയാക്റ്റ് ഫംഗ്ഷണൽ കമ്പോണന്റുകൾ മെമ്മോയിസ് ചെയ്യുന്നതിനായി React.memo എന്ന ഹയർ-ഓർഡർ കമ്പോണന്റ് നൽകുന്നു. React.memo കമ്പോണന്റിന്റെ പ്രോപ്പുകളെ ഷാലോ ആയി താരതമ്യം ചെയ്യുകയും പ്രോപ്പുകൾ മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രം വീണ്ടും റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // റെൻഡർ ലോജിക് ഇവിടെ
  return 
{props.data}
;
});

export default MyComponent;

ഷാലോ താരതമ്യം പര്യാപ്തമല്ലെങ്കിൽ നിങ്ങൾക്ക് React.memo-യിലേക്ക് ഒരു കസ്റ്റം കംപാരിസൺ ഫംഗ്ഷനും നൽകാവുന്നതാണ്.

useMemo, useCallback എന്നിവ

useMemo-യും useCallback-ഉം യഥാക്രമം വാല്യൂകളും ഫംഗ്ഷനുകളും മെമ്മോയിസ് ചെയ്യാൻ ഉപയോഗിക്കാവുന്ന റിയാക്റ്റ് ഹുക്കുകളാണ്. മെമ്മോയിസ് ചെയ്ത കമ്പോണന്റുകളിലേക്ക് പ്രോപ്പുകൾ പാസ് ചെയ്യുമ്പോൾ ഈ ഹുക്കുകൾ പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

useMemo ഒരു വാല്യൂ മെമ്മോയിസ് ചെയ്യുന്നു:

import React, { useMemo } from 'react';

function MyComponent(props) {
  const expensiveValue = useMemo(() => {
    // ചെലവേറിയ കണക്കുകൂട്ടലുകൾ ഇവിടെ നടത്തുക
    return computeExpensiveValue(props.data);
  }, [props.data]);

  return 
{expensiveValue}
;
}

useCallback ഒരു ഫംഗ്ഷൻ മെമ്മോയിസ് ചെയ്യുന്നു:

import React, { useCallback } from 'react';

function MyComponent(props) {
  const handleClick = useCallback(() => {
    // ക്ലിക്ക് ഇവന്റ് കൈകാര്യം ചെയ്യുക
    props.onClick(props.data);
  }, [props.data, props.onClick]);

  return Click me;
}

useCallback ഇല്ലാതെ, ഓരോ റെൻഡറിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് ഉണ്ടാകും, ഇത് ഫംഗ്ഷൻ്റെ ലോജിക് സമാനമാണെങ്കിൽ പോലും മെമ്മോയിസ് ചെയ്ത ചൈൽഡ് കമ്പോണന്റ് വീണ്ടും റെൻഡർ ചെയ്യാൻ കാരണമാകും.

ആംഗുലർ ചേഞ്ച് ഡിറ്റക്ഷൻ സ്ട്രാറ്റജികൾ

കമ്പോണന്റുകൾ എങ്ങനെ അപ്ഡേറ്റ് ചെയ്യപ്പെടുന്നു എന്നതിനെ ബാധിക്കുന്ന വ്യത്യസ്ത ചേഞ്ച് ഡിറ്റക്ഷൻ സ്ട്രാറ്റജികൾ ആംഗുലർ നൽകുന്നു. ഡിഫോൾട്ട് സ്ട്രാറ്റജിയായ ChangeDetectionStrategy.Default, ഓരോ ചേഞ്ച് ഡിറ്റക്ഷൻ സൈക്കിളിലും എല്ലാ കമ്പോണന്റിലെയും മാറ്റങ്ങൾ പരിശോധിക്കുന്നു.

പ്രകടനം മെച്ചപ്പെടുത്തുന്നതിന്, നിങ്ങൾക്ക് ChangeDetectionStrategy.OnPush ഉപയോഗിക്കാം. ഈ സ്ട്രാറ്റജി ഉപയോഗിക്കുമ്പോൾ, ആംഗുലർ ഒരു കമ്പോണന്റിലെ മാറ്റങ്ങൾ താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ മാത്രം പരിശോധിക്കുന്നു:

• കമ്പോണന്റിന്റെ ഇൻപുട്ട് പ്രോപ്പർട്ടികൾ മാറിയിട്ടുണ്ടെങ്കിൽ (റഫറൻസ് വഴി).
• ഒരു ഇവന്റ് കമ്പോണന്റിൽ നിന്നോ അതിൻ്റെ ഏതെങ്കിലും ചൈൽഡ് കമ്പോണന്റുകളിൽ നിന്നോ ഉണ്ടാകുമ്പോൾ.
• ചേഞ്ച് ഡിറ്റക്ഷൻ വ്യക്തമായി ട്രിഗർ ചെയ്യുമ്പോൾ.

ChangeDetectionStrategy.OnPush ഉപയോഗിക്കുന്നതിന്, കമ്പോണന്റ് ഡെക്കറേറ്ററിൽ changeDetection പ്രോപ്പർട്ടി സെറ്റ് ചെയ്യുക:

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponentComponent {
  @Input() data: any;
}

Vue.js കംപ്യൂട്ടഡ് പ്രോപ്പർട്ടീസും മെമ്മോയിസേഷനും

ഡാറ്റ മാറുമ്പോൾ DOM ഓട്ടോമാറ്റിക്കായി അപ്ഡേറ്റ് ചെയ്യുന്നതിന് Vue.js ഒരു റിയാക്ടീവ് സിസ്റ്റം ഉപയോഗിക്കുന്നു. കംപ്യൂട്ടഡ് പ്രോപ്പർട്ടികൾ ഓട്ടോമാറ്റിക്കായി മെമ്മോയിസ് ചെയ്യപ്പെടുകയും അവയുടെ ഡിപൻഡൻസികൾ മാറുമ്പോൾ മാത്രം വീണ്ടും കണക്കാക്കുകയും ചെയ്യുന്നു.

ഉദാഹരണം:

കൂടുതൽ സങ്കീർണ്ണമായ മെമ്മോയിസേഷൻ സാഹചര്യങ്ങൾക്കായി, ഒരു ചെലവേറിയ കണക്കുകൂട്ടലിൻ്റെ ഫലം കാഷെ ചെയ്യുകയും ആവശ്യമുള്ളപ്പോൾ മാത്രം അത് അപ്ഡേറ്റ് ചെയ്യുകയും ചെയ്യുന്നതുപോലുള്ള ടെക്നിക്കുകൾ ഉപയോഗിച്ച് ഒരു കംപ്യൂട്ടഡ് പ്രോപ്പർട്ടി എപ്പോഴാണ് വീണ്ടും കണക്കാക്കേണ്ടതെന്ന് സ്വമേധയാ നിയന്ത്രിക്കാൻ Vue.js നിങ്ങളെ അനുവദിക്കുന്നു.

2. കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും

കോഡ് സ്പ്ലിറ്റിംഗ് എന്നത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ കോഡിനെ ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ ബണ്ടിലുകളായി വിഭജിക്കുന്ന പ്രക്രിയയാണ്. ഇത് നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.

ലേസി ലോഡിംഗ് എന്നത് റിസോഴ്സുകൾ ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യുന്ന ഒരു ടെക്നിക്കാണ്. ഇത് കമ്പോണന്റുകൾ, മൊഡ്യൂളുകൾ, അല്ലെങ്കിൽ വ്യക്തിഗത ഫംഗ്ഷനുകൾ എന്നിവയിലും പ്രയോഗിക്കാവുന്നതാണ്.

React.lazy, Suspense എന്നിവ

കമ്പോണന്റുകൾ ലേസി ലോഡ് ചെയ്യുന്നതിനായി റിയാക്റ്റ് React.lazy ഫംഗ്ഷൻ നൽകുന്നു. React.lazy ഒരു ഡൈനാമിക് import() കോൾ ചെയ്യേണ്ട ഒരു ഫംഗ്ഷൻ എടുക്കുന്നു. ഇത് ഒരു പ്രോമിസ് റിട്ടേൺ ചെയ്യുന്നു, അത് റിയാക്റ്റ് കമ്പോണന്റ് അടങ്ങുന്ന ഒരു ഡിഫോൾട്ട് എക്‌സ്‌പോർട്ടുള്ള ഒരു മൊഡ്യൂളിലേക്ക് റിസോൾവ് ആകുന്നു.

തുടർന്ന് നിങ്ങൾ ലേസി-ലോഡ് ചെയ്ത കമ്പോണന്റിന് മുകളിൽ ഒരു Suspense കമ്പോണന്റ് റെൻഡർ ചെയ്യണം. ലേസി കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ പ്രദർശിപ്പിക്കേണ്ട ഒരു ഫാൾബാക്ക് UI ഇത് വ്യക്തമാക്കുന്നു.

ഉദാഹരണം:

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // കമ്പോണന്റ് ഡെഫനിഷൻ റിസോൾവ് കോൾബാക്കിലേക്ക് പാസ് ചെയ്യുക
    resolve({
      template: '
I am async!
'
    })
  }, 1000)
})

Vue.component('async-webpack-example', () => import('./my-async-component'))